<template>
    <el-breadcrumb class="breadcrumb" separator="/">
        <transition-group name="breadcrumb">
            <el-breadcrumb-item v-for="(item, index) in crumbList" :key="item.path">
                <!-- 不可点击项 -->
                <span v-if="index === crumbList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
                <!-- 可点击项 -->
                <a v-else class="redirect" @click.prevent="onLinkClick(item)">{{ item.meta.title }}</a>
            </el-breadcrumb-item>
        </transition-group>
    </el-breadcrumb>
</template>
<script setup>
import { ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const crumbList = ref([]);
watch(
    route,
    (newVal, oldVal) => {
        console.log('---------', route.matched);
        crumbList.value = route.matched.filter((item) => item.meta && item.meta.title);
    },
    { immediate: true }
);

const router = useRouter();
const onLinkClick = (item) => {
    console.log(item);
    router.push(item.path);
};
</script>
